<template>
  <div class="product_info_card">
    <div
      :style="boxStyle"
      @click="$router.push({ path: '/pages/shop/GoodsCon/index',query:{id:config.productId}})"
    >
      <img class="product_img" :src="config.imgUrl" mode="widthFix" alt="">
      <div class="product_info" :style="'color:' + config.fontColor"><span>{{config.title}}</span>
        <div v-if="config.priceFlag != '1'" class="product_info_price">市场价：<span class="price_del_line">￥{{config.marketPrice}}</span>
          <span>会员价：<span style="color:#f85353;margin-right: 0;">￥{{config.price}}</span>
<!--            <span style="color: black;font-size: 24rpx;">/{{config.unitName}}</span>-->
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    config: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {};
  },
  computed: {
    boxStyle() {
      return `padding-left:${this.config.horizontalPadding}px;padding-right:${
        this.config.horizontalPadding
      }px;padding-top:${this.config.verticalPadding}px;padding-bottom:${
        this.config.verticalPadding
      }px;background-color:${this.config.backgroundColor};`;
    }
  }
};
</script>
<style scoped>
.product_info_card {
  width: 100%;
  position: relative;
  text-align: center;
}
.product_info_card .product_img {
  width: 100%;
  vertical-align: top;
}
.product_info_card .product_info {
  position: absolute;
  color: #333333;
  width: 90%;
  left: 5%;
  bottom: 30rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 48rpx;
}
.product_info .product_info_price span {
  margin-right: 15rpx;
}
.price_del_line {
  text-decoration: line-through;
}
</style>


